<template>
  <el-table :data="list" border stripe style="min-width: 100%" :loading="loading"
    :element-loading-text="$t('domainlist.loadingText')" size="medium">
    <el-table-column :label="$t('domainlist.index')" min-width="80" type="index" :index="indexMethod" align="center" />

    <el-table-column :label="$t('domainlist.domain')" width="260" align="left">
      <template #default="{ row }">
        <a :href="formatUrl(row.host, row.dirpath)" target="_blank" rel="noopener noreferrer" class="domain-link">
          {{ formatUrl(row.host, row.dirpath) }}
        </a>
      </template>
    </el-table-column>

    <el-table-column prop="template" :label="$t('domainlist.template')" min-width="100" align="left">
      <template #default="{ row }">
        {{ row.template || '-' }}
      </template>
    </el-table-column>

    <el-table-column prop="status" :label="$t('domainlist.status')" min-width="120" align="center">
      <template #default="{ row }">
        {{ formatDeployStatus(row.status, row.tasktag) }}
      </template>
    </el-table-column>

    <el-table-column prop="finishedTimes" :label="$t('domainlist.lastUpdated')" min-width="140" align="center">
      <template #default="{ row }">
        {{ formatDate(row.finishedTimes) || '-' }}
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column :label="$t('domainlist.operation')" min-width="280" align="center">
      <template #default="{ row }">
        <div class="table-actions">
          <el-button-group>
            <el-button type="info" size="medium" @click="$emit('viewLogs', row)">
              {{ $t('domainlist.viewLogs') }}
            </el-button>

            <el-button type="primary" size="medium" @click="$emit('push', row)">
              {{ $t('domainlist.push') }}
            </el-button>
            <el-button type="success" size="medium" @click="$emit('addAd', row)">
              {{ $t('domainlist.addAd') }}
            </el-button>
          </el-button-group>

          <el-dropdown size="medium" trigger="click" class="dropdown-safe"
            @command="cmd => $emit('dropdown-command', { cmd, row })">
            <el-button size="medium" type="info" class="dropdown-button-safe">
              {{ $t('domainlist.more') }}
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>

            <el-dropdown-menu slot="dropdown" class="custom-dropdown-menu">
              <el-dropdown-item command="viewConfig">
                <i class="el-icon-document" style="margin-right: 6px;" />
                {{ $t('domainlist.viewConfig') }}
              </el-dropdown-item>
              <el-dropdown-item command="addHeader">
                <i class="el-icon-plus" style="margin-right: 6px;" />
                {{ $t('domainlist.addHeader') }}
              </el-dropdown-item>
              <el-dropdown-item command="removeAdTags">
                <i class="el-icon-close" style="margin-right: 6px; color: #e6a23c;" />
                <span style="color: #e6a23c;">{{ $t('domainlist.removeAdTags') }}</span>
              </el-dropdown-item>

              <el-dropdown-item command="restoreAdTags">
                <i class="el-icon-refresh" style="margin-right: 6px; color: #67c23a;" />
                <span style="color: #67c23a;">{{ $t('domainlist.restoreAdTags') }}</span>
              </el-dropdown-item>
              <el-dropdown-item command="remove">
                <i class="el-icon-delete" style="margin-right: 6px; color: #f56c6c;" />
                <span style="color: #f56c6c;">{{ $t('domainlist.remove') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { TASK_TAG, DEPLOY_STATUS } from '@/assets/data/constants'
export default {
  name: 'DomainTable',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: Boolean,
    indexMethod: Function
  },
  methods: {
    formatDeployStatus(status, tasktag) {
      switch (status) {
        case DEPLOY_STATUS.PRIORITY: return '待执行'
        case DEPLOY_STATUS.PENDING: return '排队中'
        case DEPLOY_STATUS.IN_PROGRESS: return '推送中'
        case DEPLOY_STATUS.DONE: return (tasktag === TASK_TAG.DESTROY) ? '已移除' : '已发布'
        case DEPLOY_STATUS.SKIPPED: return '初始化'
        case DEPLOY_STATUS.CANCELED: return '取消任务'
        case DEPLOY_STATUS.FAILED: return 'Failed'
        default: return '-'
      }
    },
    formatDate(utcStr) {
      if (!utcStr) return ''
      return new Date(utcStr).toLocaleString()
    },
    formatUrl(host, dirpath) {
      if (!host) return ''
      const path = (dirpath || '').trim().replace(/^\/+|\/+$/g, '')
      return path ? `https://${host}/${path}` : `https://${host}/`
    }

  }
}
</script>

<style>
.domain-link {
  text-decoration: underline;
  color: #409EFF;
  font-weight: 500;
}

.table-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.el-table {
  font-size: 11px !important;
}

.el-table[size="small"] .el-table__row,
.el-table .el-table__body-wrapper tbody tr.el-table__row {
  height: 30px !important;
  line-height: 30px !important;
}

.el-table .el-table__body-wrapper tbody tr.el-table__row>td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.el-table .el-table__header-wrapper thead tr {
  height: 30px !important;
  line-height: 30px !important;
}

.el-table .el-table__header-wrapper thead tr>th {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.el-button {
  font-size: 12px !important;
}
</style>
